<template>
	<view class="personal my-mgt-10">
		<view class="contant_box">
			<view class="contant_box_li my-pdlr-15">
				<view class="txt">头像</view>
				<view class="img_box" @click="updateimg">
					<image :src="currentImage===null?'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/dHkrhsgLUN_logo_icon.jpg':currentImage" class="logo_img my-mgr-8" mode=""></image>
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png" class="right_img" mode=""></image>
				</view>
			</view>
			<view class="contant_box_li my-pdlr-15">
				<view class="txt">昵称</view>
				<view class="img_box" @click="setNickname">
					<view class="my-mgr-8">{{nickname}}</view>
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png" class="right_img" mode=""></image>
				</view>
			</view>
			<view class="contant_box_li my-pdlr-15">
				<view class="txt">手机号</view>
				<view class="img_box">
					<view class="">{{phone}}</view>
				</view>
			</view>
			<view class="contant_box_li my-pdlr-15">
				<view class="txt">推荐人</view>
				<view class="img_box">
					<view class="">{{parentPhone ||'暂无'}}</view>
				</view>
			</view>
			<view class="contant_box_li my-pdlr-15" @click="gochangePass">
				<view class="txt">修改密码</view>
				<view class="img_box">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png" class="right_img" mode=""></image>
				</view>
			</view>
			<view class="contant_box_li my-pdlr-15" @click="setpayPass">
				<view class="txt">设置支付密码</view>
				<view class="img_box">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png" class="right_img" mode=""></image>
				</view>
			</view>
			<view class="contant_box_li my-pdlr-15 my-mgt-15" @click="goRealName">
				<view class="txt">实名认证</view>
				<view class="img_box">
					<text class="my-mgr-10">{{realNameAuth?'已认证':'去认证'}}</text>
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png" class="right_img" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {updateImgApi} from "@/api/myinter.js"
	import {baseURL} from "@/utils/req.js"
	import { createNamespacedHelpers } from "vuex";
	const { mapState,mapActions } = createNamespacedHelpers( "my");
	export default {
		data() {
			return {
				currentImage:null,
			};
		},
		computed:{
			...mapState(["phone","parentPhone","imgUrl","nickname","realNameAuth"]),
			get(){
				this.currentImage = this.imgUrl
			}
		},
		methods:{
			...mapActions(["getUserData"]),
			updateimg(){
				let _this = this
				wx.chooseImage({
					count: 1,// 默认9，这里显示一次选择相册的图片数量 
					sizeType: ['original '],// 可以指定是原图还是压缩图，默认二者都有 
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success (res) {
						const tempFilePaths = res.tempFilePaths 
						 wx.uploadFile({
							url: baseURL + '/user/tool/upload',
							 filePath: tempFilePaths[0],
							 name: 'file',
							 header: {
							 	'X-HXCharge-Authentication':uni.getStorageSync('sessionKey'),
							 },
							 success (res){
							    let data = JSON.parse(res.data)
								_this.updateImgServer(data.data)
							  }
						 })
					}
				})
			},
			async updateImgServer(img){
				let _this = this
				let params = {
					imgUrl:img
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await updateImgApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					uni.showToast({
						title:"上传成功",
						icon:"success",
						success() {
							setTimeout(()=>{
								_this.getUserData()
							},500)
						}
					})
				}
			},
			gochangePass(){
				uni.navigateTo({
					url:"/pages/my/ChangePassword?phone="+ this.phone
				})
			},
			setNickname(){
				uni.redirectTo({
					url:"/pages/my/setNickname"
				})
			},
			setpayPass(){
				uni.navigateTo({
					url:"/pages/my/setPayPassword"
				})
			},
			goRealName(){
				uni.navigateTo({
					url:'/pages/my/realNameAuthentication'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal{
		width: 100%;
		height: 100vh;
		background: #F7F7F7;
		.contant_box{
			width: 100%;
			height: 1100rpx;
			.contant_box_li{
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				.txt{
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
				.img_box{
					display: flex;
					align-items: center;
					.logo_img{
						width: 68rpx;
						height: 68rpx;
						border-radius: 50%;
					}
					.right_img{
						width: 16rpx;
						height: 16rpx;
					}
				}
			}
		}
	}
</style>
